<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="lef">
        <i />
        <span>员工管理</span>
        <span>/编辑信息</span>
      </div>
    </div>
    <el-form ref="form" :model="formLi" :rules="suForm" label-width="95px">
      <el-form-item prop="zhanghao" label="员工账户:">
        <el-input v-model.trim="formLi.zhanghao" autofocus="true" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item prop="name" label="员工姓名:">
        <el-input v-model.trim="formLi.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item prop="email" label="邮箱地址:">
        <el-input v-model.trim="formLi.email" placeholder="请输入地址" />
      </el-form-item>
      <div class="xiaofu">
        <el-form-item label="所属部门:">
           <el-select  v-model="formLi.region" placeholder="请选择部门">
            <el-option
              v-for="item in initList"
              :key="item.id"
              :label="item.departmentName"
              :value="item.departmentName"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <p>选择所属部门后默认继承部门权限，可在员工列表中单独设置权限</p>
      <el-form-item prop="passa" label="登录密码:">
        <el-input type="password" v-model.trim="formLi.passa" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item prop="passb" label="确认密码:">
        <el-input type="password" v-model.trim="formLi.passb" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="备注信息:">
        <el-input type="textarea"
          v-model="formLi.textValue"
          style="border-radius: 3px;
          width:444px;
      border: 1px solid rgba(153, 153, 153, 1);"
          rows="12"
          cols="58"
          placeholder="请输入内容"
        />
      </el-form-item>
      <div class="but">
        <el-button type="primary" @click="getaddStaff">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { bianji,getSection,getInitial } from '../../../api/jurisdiction.js'
import { constants } from 'crypto'
export default {
  data() {
    return {
      xinList: [],
      initList:[],
      code: '',
      value:'',
      formLi: {
        zhanghao: '',
        name: '',
        email: '',
        region: '',
        passa: '',
        passb: '',
        textValue: ''
      },
      suForm: {
        zhanghao: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5_a-zA-Z0-9_]{4,20}$/.test(value) == false) {
                callback(new Error('用户名由4-20位组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5_a-zA-Z0-9_]{4,20}$/.test(value) == false) {
                callback(new Error('用户名由4-20位组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (
                /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(
                  value
                ) == false
              ) {
                callback(new Error('邮箱数字字母组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        passa: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error('用户名由6-20位数字字母组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        passb: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error('用户名由6-20位数字字母组成'))
              } else if (value !== this.formLi.passa) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        textValue: [
          { required: true, message: '请输入备注信息', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4E00-\u9FA5]{2,40}$/.test(value) == false) {
                callback(new Error('用户名由2-40位组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    
    this.init();
    this.initName();
  },
  methods: {
    initName() {
      getSection({
        pageNum: 1,
        pageSize: 100
      }).then(res => {
        if (res.code == 200) {
          this.initList = res.data.list;
        }
      });
    },
    getaddStaff() {
      if (
        this.formLi.zhanghao != '' &&
        this.formLi.name != '' &&
        this.formLi.email != '' &&
        this.formLi.region != '' &&
        this.formLi.passa != '' &&
        this.formLi.passb != ''
       
      ) {
        bianji({
          code: this.code,
          phone: this.formLi.zhanghao,
          password: this.formLi.passa,
          passwordConfir: this.formLi.passb,
          name: this.formLi.name,
          status: 1,
          departmentCode: 'dms',
          departmentName: this.formLi.region,
          email: this.formLi.email,
          remark: this.formLi.textValue
        }).then(res => {
          if (res.code === 200) {
            this.$router.replace('staffManagement')
            this.$message({
              message: '修改成功！将返回前一页',
              type: 'success'
            });
          }
        })
      } else {
        this.$message({
          message: '请填写信息！',
          type: 'warning'
        });
      }
    },
    init() {

      getInitial({
        code:this.$route.query.code
      }).then(res=>{
        if(res.code==200){
          this.formLi.code = res.data.code
          this.formLi.zhanghao = res.data.phone
          this.formLi.name = res.data.name
          this.formLi.status = res.data.status
          this.formLi.departmentCode = res.data.departmentCode
          this.formLi.departmentName = res.data.departmentName
          this.formLi.email = res.data.email
          this.code = res.data.code
          this.formLi.region=res.data.departmentName
        }
      })
      
    }
  }
}
</script>

<style lang="scss">
.dashboard-container {
  position: relative;
  margin: 0;
  margin-left: 29px;
  padding: 0;
  .dashboard-text {
    margin-top: 17px;
    width: 1517px;
    height: 37px;
    margin-bottom: 16px;
    .lef {
      float: left;
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      i {
        float: left;
        margin-top: 8.5px;
        width: 11px;
        height: 20px;
        background: rgba(72, 141, 255, 1);
        border-radius: 4px;
        margin-right: 12px;
      }
    }
    .rig {
      font-size: 14px;
      width: 76px;
      height: 37px;
      text-align: center;
      line-height: 37px;
      background: #488dff;
      border-radius: 4px;
      line-height: 37px;
      float: right;
    }
  }
  // from
  .el-form {
    position: relative !important;
    width: 1549px;
    height: 715px;
    padding: 30px 0 0 70px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    .xiaofu {
      .el-input {
        width: 214px !important;
        height: 36px !important;
        border-radius: 3px !important;
        font-size: 16px;
        color: #999;
        // border: 1px solid rgba(153, 153, 153, 1) !important;
      }
    }
    .el-input {
      width: 444px !important;
      height: 36px !important;
      border-radius: 3px !important;
      font-size: 16px;
      color: #999;
      // border: 1px solid rgba(153, 153, 153, 1) !important;
    }

    .el-input__inner {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #999 !important;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 36px;
      line-height: 36px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }
    p {
      width: 450px;
      margin-left: 92px;
      margin-bottom: 25px;
      height: 17px;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 17px;
    }
    i {
      float: left;
      height: 40px;
      line-height: 45px;
      width: 9px;
      font-size: 16px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #c31010;
    }
    input[type="textarea"] {
      float: left !important;
      display: block !important;
      width: 444px !important;
      height: 211px !important;
      border-radius: 3px !important;
      border: 1px solid #dcdfe6;
      resize: none;
    }
    .el-input--suffix .el-input__inner {
      padding-right: 30px;
      width: 214px !important;
      height: 36px !important;
    }
    button[type="primary"] {
      width: 800px;
      margin-left: 50px;
      position: absolute !important;
      top: 0;
      left: 0;
      background: red;
      top: 0 !important;
      left: 0 !important;
    }
    .but {
      position: absolute;
      left: 754px;
      bottom: -65px;
    }
  }
}
</style>
